<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录页面</title>
    <link href="${pageContext.request.contextPath}/css/wnm.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        .loginthree{
            margin-top: 40px;
            border: 1PX solid gainsboro;
            margin-left:75PX ;
            margin-right:100PX;
            height: 600px;
            position: relative;
        }
        .loginthree-left{
            border: 1PX solid gainsboro;
            width: 50%;
            height: 100%;
            text-align: right;
            float: left;
            position: relative;
        }
        .loginthree-left-1{
            top: 150px;
            right: 300px;
            font-size: 20px;
            color: #A9A9A9;
            position: absolute;
        }
        .loginthree-left-2{
            top: 250px;
            right: 300px;
            font-size: 20px;
            color: #A9A9A9;
            position: absolute;
        }
        .loginthree-left-3{
            top: 350px;
            right: 450px;
            font-size: 20px;
            color: #A9A9A9;
            position: absolute;

        }
        .ONE-LEFT{
            margin-left:75px ;
        }
        .loginthree-right{
            /* border: 1PX solid gainsboro; */
            width: 50%;
            height: 100%;
            float: right;
            text-align: left;
            position: relative;
        }
        .loginthree-right-1{
            position: absolute;
            top: 150px;
            left: 12.5rem;
            float: left;
            font-size: 30px;
        }
        .loginthree-right-2{
            position: absolute;
            top: 200px;
            width: 400px;
            left: 12.5rem;
            float: left;
            font-size: 15px;
        }
        .loginthree-right-3{
            position: absolute;
            top: 300px;
            left: 12.5rem;
            float: left;
            font-size: 30px;
            background-color: #D3D3D3;
        }
        .loginfour{
            position: relative;
            clear: both;
        }
        .loginfour-1{
            text-align: center;
            position: absolute;
            width: 100%;
            top: 30px;
        }
        .loginfour-2{
            position: absolute;
            width: 100%;
            top: 80px;
            text-align: center;
        }
        input{
            width: 300px;
            height: 40px;
        }
        input[type="submit"]{
            width: 150px;
            background-color: #d34b0d;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
<%--商城抬头--%>
<%@include file="headtop.jsp"%>

<!-- 第二层 -->
<div class="logintwo">
    <div class="logintwo-1">已注册用户，请登录</div>
    <div class="logintwo-2">欢迎来到我们的网站，如果您已是本站会员请登录</div>
</div>
<!-- 第三层 -->
<div class="loginthree">
    <!-- 左侧 -->
    <div class="loginthree-left">
        <form action="${pageContext.request.contextPath}/user/login" method="post" onsubmit="return checkUP()">
        <div class="loginthree-left-1" >
            用户名:&nbsp;<input type="text" name="username" placeholder="请输入用户名" onblur="exist()" id="username"/><br>
            <span id="usernamemsg"></span>
        </div>
        <div  class="loginthree-left-2">
            密码:&nbsp;<input type="password" name="password" placeholder="请输入密码" onblur="checkPassword()" id="password"/><br>
            <span id="passwordmsg"></span>
        </div>
        <div class="loginthree-left-3">
            <input type="submit" name="submit" value="登  录" /><br>
            <span id="submitmsg" style="color: red">${msg.massage}</span>
        </div>
        </form>
    </div>
    <!-- 右侧 -->
    <div class="loginthree-right">
        <div class="loginthree-right-1"> 您还不是用户</div>
        <div class="loginthree-right-2">现在免费注册成为&nbsp;用户，便能立即享受便宜又放心的购物乐趣。&nbsp;
            <a href="${pageContext.request.contextPath}/jspPage/homePage.jsp">
                网站首页&gt;&gt;
            </a>
        </div>
        <div class="loginthree-right-3">
            <a href="${pageContext.request.contextPath}/jspPage/register.jsp">
                <input  type="button"  value="注册新用户" onclick="toregister()"/>
            </a>
        </div>
    </div>
</div>

<!-- 第四层 -->
<div class="loginfour">
    <%@include file="footer.jsp"%>
</div>
</body>
<script>
    function checkUP() {
        let username = $("#username").val();
        let password = $("#password").val();
       $.post("${pageContext.request.contextPath}/user/checkLogin","username="+username+"$password="+password,function (data) {
            if (checkPassword()&&data.flag){
                return true;
            }else {
                $("#submitmsg").html("<span style='color: red'>"+data.massage+"</span>");
                return false;
            }
       },"json")
    }
    // alert("用户名不能为空");
    function checkUsername() {
        //校验用户名是否为空
        let username = $("#username").val();
        if(username){
            $("#usernamemsg").html("<span> 请填写用户名:格式为2-20个字符，可以为字符，数字下划线和中文</span>");
            return true;
        }else{
            $("#usernamemsg").html("<span style='color: red'>用户名不能为空</span>");
            return false;
        }
    }
    function exist() {
        //判断用户名是否存在
        let username = $("#username").val();
        if(checkUsername()){
            $.post("${pageContext.request.contextPath}/user/checkLogin","username="+username,function (data) {
                // alert(data.toString());
                if(data.flag){
                    // alert("aaa");
                    $("#usernamemsg").html("<span style='color: green'>"+data.massage+"</span>");
                    return true;
                }else {
                    $("#usernamemsg").html("<span style='color: red'>"+data.massage+"</span>");
                    return false;
                }
            },"json")
        }
    }
    // alert("密码不能为空");
    function checkPassword() {
        //校验密码是否为空
        let password = $("#password").val();
        if(password){
            $("#passwordmsg").html("<span>请填写登录密码:6-32个字符</span>");
            return true;
        }else{
            $("#passwordmsg").html("<span style='color: red'>密码不能为空</span>");
            return false;
        }
    }
</script>
</html>
